<template>
  <div class="body">
    <header class="header">
      <button class="icon-button" @click="goBack">
        <img
          src="../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
          alt="Back"
        />
      </button>
      <span style="font-size: 14px; font-weight: 540"
        >急寻：面神经炎的治疗方法</span
      >
      <button style="border: 0"></button>
    </header>
    <div class="main">
      <p><b class="name">张三</b></p>

      <p class="symptom">[症状]</p>
      <p class="illness">{{ dataList.treatmentProcess }}</p>

      <p class="symptom">[科室]</p>
      <p class="illness">{{ dataList.department }}</p>

      <p class="symptom">[症状详情]</p>
      <p class="illness illness-dialog">
        {{ dataList.detail }}
      </p>

      <p class="symptom">[治疗经历]</p>
      <p class="title">
        <b>{{ dataList.treatmentHospital }}</b>
        <b>2018.12.10-12.15</b>
      </p>
      <p class="illness illness-dialog">{{ dataList.disease }}</p>

      <p class="symptom">[相关图片]</p>
      <div class="imgbox">
        <img src="../../../images/imgbing.png" alt="" />
      </div>
    </div>

    <div class="footer">
      <b class="footer1">30H币</b>
      <button class="answer">我来解答</button>
    </div>
    <div class="return"></div>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { detaildata } from "../../../utils/geitdetail";
import { reactive, toRefs } from "vue";
import moment from "moment";

const route = useRoute();
const router = useRouter();
// const { comments, submitting, value } = toRefs(state);

// 尝试从 localStorage 获取 pid
const pidFromLocalStorage = localStorage.getItem("pid");

// 优先使用 URL 查询参数中的 pid，如果没有，则使用 localStorage 中的 pid
const pid = route.query.id || pidFromLocalStorage;

// 如果 pid 存在于 URL 查询参数或 localStorage 中，则尝试获取数据
const dataList = ref([]);

// 尝试从后端获取数据
onMounted(async () => {
  if (pid) {
    try {
      const response = await detaildata(pid);
      console.log(response.data.data, "response.data.data");
      dataList.value = response.data.data; // 假设你的响应中有一个data属性包含了你需要的数据
    } catch (error) {
      console.error("错误的是:", error);
    }
  }
});

// 回到上一个页面的函数
const goBack = () => {
  router.go(-1);
};

const state = reactive({
  comments: [],
  submitting: false,
  value: "",
  moment,
});

const handleSubmit = () => {
  if (!state.value) {
    return;
  }

  state.submitting = true;

  setTimeout(() => {
    state.submitting = false;
    state.comments = [
      {
        author: "Han Solo",
        avatar:
          "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
        content: state.value,
        datetime: moment().fromNow(),
      },
      ...state.comments,
    ];
    state.value = "";
  }, 1000);
};

const handleChange = (e) => {
  state.value = e.target.value;
};
</script>

<style lang="scss">
.body {
  display: flex;
  flex-direction: column;
}
.main {
  margin-left: 3%;
  width: 94%;
  height: 540px;
  overflow: auto;
}
.title {
  font-size: 10px;
  width: 90%;
  margin-left: 10px;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  font-weight: 100;
  color: #ccc;

  letter-spacing: 2px;
}
.name {
  color: #3087ea;
  font-size: 15px;
  margin-left: 10px;
  letter-spacing: 2px;
}
.symptom {
  color: #3087ea;
  font-size: 13px;
  margin-left: 10px;
  letter-spacing: 2px;
  font-weight: 500;
}
.illness {
  font-size: 10px;
  margin-left: 10px;
  /* color: #ccc; */
  letter-spacing: 2px;
  font-size: 12px;
}
.illness-dialog {
  color: #ccc;
}
.imgbox {
  width: 80%;
  margin-left: 10%;
  img {
    width: 100%;
    height: 100%;
  }
}
.footer {
  width: 93%;
  height: 55px;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  left: 3%;
  right: 3%;
  display: flex;
}
.footer1 {
  width: 70%;
  height: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 16px;
  color: #f00;
}
.answer {
  width: 100px;
  height: 50px;
  margin-top: 3px;
  border: none;
  background: #3087ea;
  color: #fff;
}
</style>
